<script setup lang="ts" name="ClockTomato">
import MenuBar from '@/views/components/menuBar/index.vue'
import { openChildWindow } from '@/utils/windowTool'
import { onTabOnceMessage } from '@/utils/windowTool'
import bgiClockTomato from '@/assets/images/bgi-clock-tomato.gif'
import numClockTomato from '@/assets/images/num-clock-tomato.png'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

/*========================================>( 模型属性 )<========================================*/
//是否显示角标
const isCorner = ref<boolean>(true)

//倒计时时长
const countdown = ref<number>(0)

//标题栏菜单
const menuBarMenus = ref<Array<any>>([
    {
        name: '设置',
        icon: 'setting',
        childrens: [
            { name: '设置时长', mark: 'time' },
            { name: '开始', mark: 'start', icon: 'start-1' },
            { name: '结束', mark: 'stop', icon: 'stop-1' },
            { name: '显示计时角标', mark: 'corner', type: 'checkbox', value: isCorner.value },
        ]
    },
    {
        name: '列表',
        mark: 'list',
        icon: 'list',
    }
])


/*========================================>( 计算属性 )<========================================*/

//根据剩余毫秒数计算显示时间
const calcTime = computed(() => {
    let m = Math.floor(countdown.value / 1000 / 60)
    let s = Math.floor(countdown.value / 1000) % 60
    const n1 = m < 10 ? '0' : m.toString()[0]
    const n2 = m < 10 ? m : m.toString()[1]
    const n3 = s < 10 ? '0' : s.toString()[0]
    const n4 = s < 10 ? s : s.toString()[1]
    return [`p-${n1}`, `p-${n2}`, `p-${n3}`, `p-${n4}`]
})

//定义IPC方法
const ipcs = {
    //初始化本窗口
    init: () => {
        window.ipcRenderer.send('TOMATO-INIT')
    },
    //开始计时任务
    start: ():string => {
        return window.ipcRenderer.sendSync('TOMATO-START').error
    },
    //停止计时任务
    stop: () => {
        return window.ipcRenderer.sendSync('TOMATO-STOP').error
    },
    //切换角标是否显示
    changeCorner: (show: boolean) => {
        window.ipcRenderer.send('TOMATO-CORNER-VISIABLE', { show })
    },
    //获取番茄钟的设置数据
    getConfig: () => {
        const { module, value } = window.ipcRenderer.sendSync('STORAGE-GET', { module: 'tomato' })
        //如果所属本模块，更新模块设置数据
        if (module == 'tomato') {
            isCorner.value = value.showCorner
            menuBarMenus.value[0].childrens[3].value = isCorner.value
        }
    }
}

//监听菜单
const handelBarMenusSelected = (mark: string) => {
    switch (mark) {
        case 'time':
            onTabOnceMessage('setTime').then(() => {
                proxy?.$modal.alertSuccess('修改成功')
            })
            openChildWindow({ hash: 'clock_tomato/set_time', width: 300, height: 100 })
            break
        case 'start':
            var startErr = ipcs.start()
            if(startErr){
                proxy?.$modal.msgError(startErr,50)
            }else{
                proxy?.$modal.msgSuccess('计时已开始',50)
            }
            break
        case 'stop':
            var stopErr = ipcs.stop()
            if(stopErr){
                proxy?.$modal.msgError(stopErr,50)
            }else{
                proxy?.$modal.msgWarning('计时已停止',50)
            }
            break
        case 'corner':
            isCorner.value = !isCorner.value
            menuBarMenus.value[0].childrens[3].value = isCorner.value
            ipcs.changeCorner(isCorner.value)
            break
        case 'list':
            openChildWindow({ hash: 'clock_tomato/list', width: 480, height: 500 })
            break
        default:
            break
    }
}

onMounted(() => {
    initIpcListener()
    //初始化面板
    ipcs.init()
    //请求本模块数据
    ipcs.getConfig()
})

//初始化IPC监听
const initIpcListener = () => {
    //监听时长，心跳
    window.ipcRenderer.listen('TOMATO-CLOCK-CALL', (e, res): void => {
        //返回心跳
        const { value } = res
        countdown.value = value
    })
}
</script>
<template>
    <MenuBar title="番茄钟" mid="ModuleImgEdit" :menus="menuBarMenus" barColor="#222" hideMinimize hideMaximize @select="handelBarMenusSelected" />
    <div class="main-content clock-tomato" :style="{backgroundImage:`url('${bgiClockTomato}')`}">
        <div class="pad">
            <div class="num" :class="calcTime[0]" :style="{backgroundImage:`url(${numClockTomato})`}"></div>
            <div class="num" :class="calcTime[1]" :style="{backgroundImage:`url(${numClockTomato})`}"></div>
            <div class="dot">:</div>
            <div class="num" :class="calcTime[2]" :style="{backgroundImage:`url(${numClockTomato})`}"></div>
            <div class="num" :class="calcTime[3]" :style="{backgroundImage:`url(${numClockTomato})`}"></div>
        </div>
        <div class="rw-100 xh-30"></div>
    </div>
</template>
<style lang="scss">
.main-content.clock-tomato {
    width: 100%;
    height: calc(100% - 40px);
    // background-image: url('/images/bgi-clock-tomato.gif');
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;

    .pad {
        display: table;

        .num {
            float: left;
            width: 50px;
            height: 80px;
            // background-color: #ccc;
            // background-image: url('/images/num-clock-tomato.png');
            background-size: 255px auto;
            background-repeat: no-repeat;

            &.p-1 {
                background-position: 0 0;
            }

            &.p-2 {
                background-position: -50px 0;
            }

            &.p-3 {
                background-position: -100px 0;
            }

            &.p-4 {
                background-position: -150px 0;
            }

            &.p-5 {
                background-position: -200px 0;
            }

            &.p-6 {
                background-position: 2px -77px;
            }

            &.p-7 {
                background-position: -52px -77px;
            }

            &.p-8 {
                background-position: -102px -77px;
            }

            &.p-9 {
                background-position: -152px -77px;
            }

            &.p-0 {
                background-position: -202px -77px;
            }

        }

        .dot {
            float: left;
            width: 40px;
            height: 80px;
            // background-color: #666;
            color: #fff;
            font-size: 60px;
            text-align: center;
            line-height: 80px;
        }
    }
}
</style>
<style lang="scss" scoped></style>
